<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="./lib/layui/css/layui.css"/>
    <!--引入页面css-->
    <link rel="stylesheet" href="./css/LoginPage.css">
    <!-- 引入 layui.js -->
    <script src="./lib/layui/layui.js"></script>
    <!--引入jquery.js-->
    <script src="./lib/jquery-tool/jquery-3.4.1.min.js"></script>
    <!--引入axios-->
    <script src="./lib/axios-tool/axios.min.js"></script>
</head>
<body>
<!--登录导航栏-->
<div class="login-header layui-row">
    <div class="layui-col-md6">
        <a href="" class="total-icon">电影购票系统</a>
    </div>
    <div class="layui-col-md6">
        <ul class="layui-nav login-nav">
            <li class="layui-nav-item"><a href="https://www.bupt.edu.cn/" target="_blank">关于我们</a></li>
        </ul>
    </div>
</div>

<!--登录表单-->
<div class="login-form-container">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>用户登录</legend>
    </fieldset>
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="on"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="on" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="login-form">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script>
    axios.defaults.withCredentials = true;    //发送请求携带session信息
    axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';

    //检查登录状态
    axios({
        method: 'get',
        url: 'http://localhost:9090/user/getUserFromSession',
    }).then(res => {
        console.log(res);
        if (res.data.status === 0) {
            $(location).attr('href', './FilmSearchPage.html');
        }
    })

    //监听登录提交
    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(login-form)', function (data) {
            // console.log(JSON.stringify(data.field));
            // layer.msg(JSON.stringify(data.field));
            let formData = {
                'userId': data.field.username,
                'password': data.field.password
            }
            axios({
                method: 'post',
                url: 'http://localhost:9090/user/login',
                data: JSON.stringify(formData)
            }).then(res => {
                if (res.data.status === 0) {
                    $(location).attr('href', './FilmSearchPage.html');
                } else {
                    //登录失败就打印异常信息
                    layer.msg(res.data.desc);
                }
            });
            return false;
        });
    });


</script>
<script>
    layui.use('element', function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

    });
</script>
</body>
</html>